<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : '编辑'"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center"
    lock-scroll
    width="50%"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="right"
      >
        <template v-if="!loading">
          <!-- <el-col :span="24">
            <jnpf-form-tip-item label="所属分类" prop="compilationtypeid">
              <relationForm v-model="dataForm.compilationtypeid"
                @change="changeData('compilationtypeid',-1)" placeholder="请选择" clearable
                :style='{"width":"100%"}' field="compilationtypeid" modelId="503183138969616389"
                :columnOptions="compilationtypeidcolumnOptions" relationField="F_TypeName"
                popupWidth="800px" hasPage :pageSize="20">

              </relationForm>
            </jnpf-form-tip-item>
          </el-col> -->
          <el-col :span="24">
            <jnpf-form-tip-item label="标题" prop="title">
              <el-input
                v-model="dataForm.title"
                @change="changeData('title', -1)"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="序号" prop="sort">
              <JnpfInputNumber
                v-model="dataForm.sort"
                @change="changeData('sort', -1)"
                placeholder="数字文本"
                :step="1"
                controlsPosition="bothSides"
              >
              </JnpfInputNumber>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="封面图片" prop="cover">
              <choiceFile
                v-model="dataForm.cover"
                @change="changeData('cover', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                field="cover"
                modelId="522797617961239365"
                :columnOptions="covercolumnOptions"
                :templateSelection="dataForm.cover"
                :innerValue="dataForm.covername"
                :keyname="'cover'"
                :fileType="'img'"
                relationField="billRuleField119"
                popupWidth="800px"
                hasPage
                :pageSize="20"
                @choiceFileEmit="choiceFileEmit"
              >
              </choiceFile>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="内容文件" prop="contentfile">
              <choiceFile
                v-model="dataForm.contentfile"
                @change="changeData('contentfile', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                field="contentfile"
                modelId="395179260593052933"
                :templateSelection="dataForm.contentfile"
                :innerValue="dataForm.contentfilename"
                :keyname="'contentfile'"
                :fileType="'file'"
                relationField="name"
                popupWidth="800px"
                hasPage
                :pageSize="20"
                @choiceFileEmit="choiceFileEmit"
              >
              </choiceFile>
            </jnpf-form-tip-item>
          </el-col>
          <!-- <el-col :span="24">
            <jnpf-form-tip-item label="内容文件" prop="contentfile">
              <popupSelect v-model="dataForm.contentfile" @change="changeData('contentfile',-1)"
                placeholder="请选择" :rowIndex="null" :formData="dataForm" :templateJson='[]' clearable
                :style='{"width":"100%"}' field="contentfile" interfaceId="503324762198507589"  :templateSelection="dataForm.contentfile" :innerValue="dataForm.contentfilename" :keyname="'contentfile'" :fileType="'file'"
                :columnOptions="contentfilecolumnOptions" propsValue="id" relationField="fullName"
                popupType="dialog" popupTitle="选择数据" popupWidth="800px">

              </popupSelect>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="封面" prop="cover">
              <popupSelect v-model="dataForm.cover" @change="changeData('cover',-1)"
                placeholder="请选择" :rowIndex="null" :formData="dataForm" :templateJson='[]' clearable
                :style='{"width":"100%"}' field="cover" interfaceId="503324762198507589"
                :columnOptions="covercolumnOptions" propsValue="id" relationField="fullName"
                popupType="dialog" popupTitle="选择数据" popupWidth="800px">

              </popupSelect>
            </jnpf-form-tip-item>
          </el-col> -->
          <el-col :span="24">
            <jnpf-form-tip-item label="关键词" prop="keyword">
              <JnpfSelect
                v-model="dataForm.keyword"
                @change="changeData('keyword', -1)"
                placeholder="请选择"
                clearable
                :style="{ width: '100%' }"
                filterable
                :multiple="true"
                :options="keywordOptions"
                :props="keywordProps"
              >
              </JnpfSelect>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="说明" prop="illustrate">
              <el-input
                v-model="dataForm.illustrate"
                @change="changeData('illustrate', -1)"
                placeholder="请输入"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </jnpf-form-tip-item>
          </el-col>
          <el-col :span="24">
            <jnpf-form-tip-item label="编辑内容" prop="editcontent">
              <JNPF-Quill
                v-model="dataForm.editcontent"
                @change="changeData('editcontent', -1)"
                placeholder="请输入"
                :style="{ width: '100%' }"
              >
              </JNPF-Quill>
            </jnpf-form-tip-item>
          </el-col>
        </template>
      </el-form>
      <SelectDialog
        v-if="selectDialogVisible"
        :config="currTableConf"
        :formData="dataForm"
        ref="selectDialog"
        @select="addForSelect"
        @close="selectDialogVisible = false"
      />
    </el-row>
    <span slot="footer" class="dialog-footer">
      <!-- <div class="upAndDown-button" v-if="dataForm.id">
        <el-button @click="prev" :disabled='prevDis'>
          {{'上一条'}}
        </el-button>
        <el-button @click="next" :disabled='nextDis'>
          {{'下一条'}}
        </el-button>
      </div> -->
      <el-button @click="visible = false"> 取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">
        确 定</el-button
      >
      <!-- <el-button type="primary" @click="dataFormSubmit(2)" :loading="continueBtnLoading">
        {{!dataForm.id ?'确定并新增':'确定并继续'}}</el-button> -->
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { mapGetters } from "vuex";
import { getDataInterfaceRes } from "@/api/systemData/dataInterface";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { getDefaultCurrentValueUserId } from "@/api/permission/user";
import { getDefaultCurrentValueDepartmentId } from "@/api/permission/organize";
import {
  getDateDay,
  getLaterData,
  getBeforeData,
  getBeforeTime,
  getLaterTime
} from "@/components/Generator/utils/index.js";
import { thousandsFormat } from "@/components/Generator/utils/index";
import choiceFile from "@/views/mzcompilationproject/choiceFile.vue";
export default {
  components: { choiceFile: choiceFile },
  props: [],
  data() {
    return {
      dataFormSubmitType: 0,
      continueBtnLoading: false,
      index: 0,
      prevDis: false,
      nextDis: false,
      allList: [],
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {},
      //可选范围默认值
      ableAll: {},
      tableRows: {},
      currVmodel: "",
      dataForm: {
        compilationtypeid: "",
        compilationProjectId: "",
        title: "",
        sort: 0,
        contentfile: "",
        cover: "",
        keyword: [],
        illustrate: "",
        editcontent: "",
        mz_compilationproject: {
          projectname: ""
        },
        jnpf_mz_compilationproject_jnpf_projectname: ""
      },
      rules: {},
      compilationtypeidcolumnOptions: [
        { label: "类型编码", value: "F_TypeCode" },
        { label: "是否导航展示", value: "F_IsShow" },
        { label: "是否启用", value: "F_EnabledMark" }
      ],
      contentfilecolumnOptions: [],
      covercolumnOptions: [],
      keywordOptions: [],
      keywordProps: { label: "fullName", value: "id" },

      childIndex: -1,
      isEdit: false,
      interfaceRes: {
        compilationtypeid: [],
        title: [],
        sort: [],
        contentfile: [],
        cover: [],
        keyword: [],
        illustrate: [],
        editcontent: [],
        jnpf_mz_compilationproject_jnpf_projectname: []
      }
    };
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  watch: {},
  created() {
    this.dataAll();
  },
  mounted() {},
  methods: {
    prev() {
      this.index--;
      if (this.index === 0) {
        this.prevDis = true;
      }
      this.nextDis = false;
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id);
        }
      }
    },
    next() {
      this.index++;
      if (this.index === this.allList.length - 1) {
        this.nextDis = true;
      }
      this.prevDis = false;
      for (let index = 0; index < this.allList.length; index++) {
        const element = this.allList[index];
        if (this.index == index) {
          this.getInfo(element.id);
        }
      }
    },
    getInfo(id) {
      request({
        url: "/api/example/MzProjectcontent/" + id,
        method: "get"
      }).then(res => {
        this.dataInfo(res.data);
      });
    },
    goBack() {
      this.visible = false;
      this.$emit("refreshDataList", true);
    },
    changeData(model, index) {
      this.isEdit = false;
      this.childIndex = index;
      let modelAll = model.split("-");
      let faceMode = "";
      for (let i = 0; i < modelAll.length; i++) {
        faceMode += modelAll[i];
      }
      for (let key in this.interfaceRes) {
        if (key != faceMode) {
          let faceReList = this.interfaceRes[key];
          for (let i = 0; i < faceReList.length; i++) {
            if (faceReList[i].relationField == model) {
              let options = "get" + key + "Options";
              if (this[options]) {
                this[options]();
              }
              this.changeData(key, index);
            }
          }
        }
      }
    },
    changeDataFormData(type, data, model, index, defaultValue) {
      if (!this.isEdit) {
        if (type == 2) {
          for (let i = 0; i < this.dataForm[data].length; i++) {
            if (index == -1) {
              this.dataForm[data][i][model] = defaultValue;
            } else if (index == i) {
              this.dataForm[data][i][model] = defaultValue;
            }
          }
        } else {
          this.dataForm[data] = defaultValue;
        }
      }
    },
    dataAll() {
      this.getkeywordOptions();
    },
    getkeywordOptions() {
      getDictionaryDataSelector("503138438824853509").then(res => {
        this.keywordOptions = res.data.list;
      });
    },
    clearData() {
      //   this.dataForm.compilationtypeid = "";
      this.dataForm.title = "";
      this.dataForm.sort = 0;
      this.dataForm.contentfile = "";
      this.dataForm.cover = "";
      this.dataForm.keyword = [];
      this.dataForm.illustrate = "";
      this.dataForm.editcontent = "";
      this.dataForm.mz_compilationproject.projectname = "";
      this.dataForm.jnpf_mz_compilationproject_jnpf_projectname = "";
    },
    init(id, isDetail, obj) {
      console.log(obj);
      this.prevDis = false;
      this.nextDis = false;
      this.dataForm.id = id || 0;
      this.visible = true;

      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/example/MzProjectcontent/" + this.dataForm.id,
            method: "get"
          }).then(res => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        } else {
          this.clearData();
          this.initDefaultData();
        }
      });
      this.dataForm.compilationtypeid = obj.compilationtypeid;
      this.dataForm.compilationProjectId = obj.compilationProjectId;
      console.log(this.dataForm);
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    //初始化默认数据
    initDefaultData() {},
    // 表单提交
    dataFormSubmit(type) {
      this.dataFormSubmitType = type ? type : 0;
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.request();
        }
      });
    },
    request() {
      if (this.dataFormSubmitType == 2) {
        this.continueBtnLoading = true;
      } else {
        this.btnLoading = true;
      }
      let _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/example/MzProjectcontent",
          method: "post",
          data: _data
        })
          .then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                if (this.dataFormSubmitType == 2) {
                  this.$nextTick(() => {
                    this.$refs["elForm"].resetFields();
                    this.clearData();
                    this.initDefaultData();
                  });
                  this.continueBtnLoading = false;
                  return;
                }
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refresh", true);
              }
            });
          })
          .catch(() => {
            this.btnLoading = false;
            this.continueBtnLoading = false;
          });
      } else {
        request({
          url: "/api/example/MzProjectcontent/" + this.dataForm.id,
          method: "PUT",
          data: _data
        })
          .then(res => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                if (this.dataFormSubmitType == 2)
                  return (this.continueBtnLoading = false);
                this.visible = false;
                this.btnLoading = false;
                this.$emit("refresh", true);
              }
            });
          })
          .catch(() => {
            this.btnLoading = false;
            this.continueBtnLoading = false;
          });
      }
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key];
      this.currVmodel = key;
      this.selectDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.selectDialog.init();
      });
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] };
        this.dataForm[this.currVmodel].push(item);
      }
    },
    dateTime(timeRule, timeType, timeTarget, timeValueData, dataValue) {
      let timeDataValue = null;
      let timeValue = Number(timeValueData);
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue;
        } else if (timeType == 2) {
          timeDataValue = dataValue;
        } else if (timeType == 3) {
          timeDataValue = new Date().getTime();
        } else if (timeType == 4) {
          let previousDate = "";
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else if (timeTarget == 3) {
            previousDate = getBeforeData(timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else {
            timeDataValue = getBeforeTime(timeTarget, timeValue).getTime();
          }
        } else if (timeType == 5) {
          let previousDate = "";
          if (timeTarget == 1 || timeTarget == 2) {
            previousDate = getDateDay(timeTarget, timeType, timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else if (timeTarget == 3) {
            previousDate = getLaterData(timeValue);
            timeDataValue = new Date(previousDate).getTime();
          } else {
            timeDataValue = getLaterTime(timeTarget, timeValue).getTime();
          }
        }
      }
      return timeDataValue;
    },
    time(timeRule, timeType, timeTarget, timeValue, formatType, dataValue) {
      let format = formatType == "HH:mm" ? "HH:mm:00" : formatType;
      let timeDataValue = null;
      if (timeRule) {
        if (timeType == 1) {
          timeDataValue = timeValue || "00:00:00";
          if (timeDataValue.split(":").length == 3) {
            timeDataValue = timeDataValue;
          } else {
            timeDataValue = timeDataValue + ":00";
          }
        } else if (timeType == 2) {
          timeDataValue = dataValue;
        } else if (timeType == 3) {
          timeDataValue = this.jnpf.toDate(new Date(), format);
        } else if (timeType == 4) {
          let previousDate = "";
          previousDate = getBeforeTime(timeTarget, timeValue);
          timeDataValue = this.jnpf.toDate(previousDate, format);
        } else if (timeType == 5) {
          let previousDate = "";
          previousDate = getLaterTime(timeTarget, timeValue);
          timeDataValue = this.jnpf.toDate(previousDate, format);
        }
      }
      return timeDataValue;
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.keyword = Array.isArray(_data.keyword)
        ? JSON.stringify(_data.keyword)
        : "[]";
      _data.mz_compilationproject.projectname =
        _data.jnpf_mz_compilationproject_jnpf_projectname;
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.keyword = _dataAll.keyword ? JSON.parse(_dataAll.keyword) : [];
      _dataAll.jnpf_mz_compilationproject_jnpf_projectname =
        _dataAll.mz_compilationproject.projectname;
      this.dataForm = _dataAll;
      this.isEdit = true;
      this.dataAll();
      this.childIndex = -1;
    },

    choiceFileEmit(obj) {
      console.log(obj);
      this.dataForm[obj.name + "name"] = obj.fullName;
      this.dataForm[obj.name] = obj.id;
    }
  }
};
</script>
